<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

	
<script>
        
$(document).ready(function() {
            $("#loginButton").click(function(){

       var username = $("#username").val();
       var password = $("#password").val();
 



var jsontext = '{"displayName":"Mehmet","status":"1","password":"'+password+'","userId":19,"email":"'+username+'"}';


 $.ajax({
 url:"http://localhost:8686/NowShuttleWebApi/operations/checkUser",
  type:"POST",
  data:jsontext,
  contentType:"application/json; charset=utf-8",
  dataType:"json",
converters:"text json" ,
converters: {
        'jsonp': jQuery.parseJSON,
    },
error: function(jqXHR, textStatus, errorThrown) {
        console.log(JSON.stringify(jqXHR));
        console.log(textStatus+': '+errorThrown);
    },
  success: function(data){


    if ('1'==data.status){



localStorage.setItem('userState', data.status);
localStorage.setItem('userUserId', data.userId);

$('#goMenu').click();	
	}


  }
 });

 
 
 
                return false;
            });
        });
    </script>

  
</head> 
<body> 



<div data-role="page">

	<div data-role="header">
		<h1>Login</h1>
	</div><!-- /header -->

	<div data-role="content">	
		
	
		<form id="theForm" >
	
		<div data-role="fieldcontain">
	   
	         <label for="username">Username</label>
	         <input type="email" name="username" id="username" value=""  />
		
		
	         <label for="password">Password</label>
	         <input type="password" name="password" id="password" value=""  />
			</div>			
					
					
						 
		<div class="ui-block-b"><button id="signUpButton" type="submit" data-theme="a">Signup</a></div>	
		<div class="ui-block-b"><button id="loginButton" type="submit" data-theme="a">Login</button></div>	


<a href = "menu.html" id = "goMenu" class = "InvisibleLinks"></a>		

</form>
	
	
	</div><!-- /content -->

</div><!-- /page -->

</body>
</html>	